@import '../../src/assets/css/default.less';

@pickerPrefixCls: yh-picker;

@picker-header-height: 42px;
@picker-item-height: 30px;

.@{pickerPrefixCls} {

    &-header {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;

        position: relative;
        background: #F4F5F6;
        // border-bottom: 1px solid @border-color-base;/*no*/
        // background-color: @fill-base;
        //background-image: -webkit-linear-gradient(top,#e7e7e7,#e7e7e7,transparent,transparent);
        //background-image: linear-gradient(180deg,#e7e7e7,#e7e7e7,transparent,transparent);
        //background-position: bottom;
        //background-size: 100% 1px;/*no*/
        //background-repeat: no-repeat;

        &-item {
            color: @brand-primary;
            font-size: @font-size-base;
            height: @picker-header-height;
            line-height: @picker-header-height;
            padding: 0 15px;
        }

        &-left {
            color: #666666;
        }

        &-title {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            text-align: center;
            color: @color-text-base;
        }

        &-right {
            text-align: right;
        }
    }

    &-wrapper {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;

        align-items: center;
        flex-direction: row;
        justify-content: center;
        position: relative;
        background-color: #fff;

        .@{pickerPrefixCls}-col {
            flex: 1 1 0%;
            height: @picker-item-height * 7;
            overflow: hidden;
            position: relative;

            .@{pickerPrefixCls}-mask {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                z-index: 3;
                background-image: -webkit-linear-gradient(top,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),-webkit-linear-gradient(bottom,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));
                background-image: linear-gradient(180deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),linear-gradient(0deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));
                background-position: top,bottom;
                background-size: 100% @picker-item-height * 3;
                background-repeat: no-repeat;
            }

            .@{pickerPrefixCls}-indicator {
                position: absolute;
                left: 0;
                top: @picker-item-height * 3;
                width: 100%;
                z-index: 3;
                height: @picker-item-height;
                border-top: 1px solid @border-color-base;/*no*/
                border-bottom: 1px solid @border-color-base;/*no*/
            }

            &-scroller {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                z-index: 1;
            }

            &-item {
                touch-action: manipulation;
                font-size: @font-size-base;
                color: @color-text-base;
                height: @picker-item-height;
                line-height: @picker-item-height;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-align: center;
            }

            &-item-selected {
                font-size: 15px;
            }
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    html:not([data-scale]) .@{pickerPrefixCls}-header {
        border-bottom: 0 none;
    }

    html:not([data-scale]) .@{pickerPrefixCls}-header:after {
        content: "";
        position: absolute;
        background-color: @border-color-base;
        display: block;
        z-index: 1;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;/*no*/
        -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scaleY(.5);
        -ms-transform: scaleY(.5);
        transform: scaleY(.5);
    }

    html:not([data-scale]) .@{pickerPrefixCls}-col .@{pickerPrefixCls}-indicator {
        border-top: 0 none;
        border-bottom: 0 none;
    }

    html:not([data-scale]) .@{pickerPrefixCls}-col .@{pickerPrefixCls}-indicator:before {
        content: "";
        position: absolute;
        background-color: @border-color-base;
        display: block;
        z-index: 1;
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 1px;/*no*/
        -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scaleY(.5);
        -ms-transform: scaleY(.5);
        transform: scaleY(.5);
    }

    html:not([data-scale]) .@{pickerPrefixCls}-col .@{pickerPrefixCls}-indicator:after {
        content: "";
        position: absolute;
        background-color: @border-color-base;
        display: block;
        z-index: 1;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;/*no*/
        -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transform: scaleY(.5);
        -ms-transform: scaleY(.5);
        transform: scaleY(.5);
    }

}

